<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8"/>
    <title>TemplateTable</title>
    <link rel='stylesheet' href='./luckysheet/plugins/css/pluginsCss.css'/>
    <link rel='stylesheet' href='./luckysheet/plugins/plugins.css'/>
    <link rel='stylesheet' href='./luckysheet/css/luckysheet.css'/>
    <link rel='stylesheet' href='./luckysheet/assets/iconfont/iconfont.css'/>

    <script src="./luckysheet/js/plugin.js"></script>
    <script src="./luckysheet/js/luckysheet.umd.js"></script>
    <script src="./luckysheet/js/axios-0.18.0.js"></script>
    <script src="./luckysheet/js/vue.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="./luckysheet/css/index.css">
    <!-- 引入组件库 -->
    <script src="./luckysheet/js/index.js"></script>
    <script src="./luckysheet/js/url.js"></script>

</head>

<body>

<div id="app">
    <span>{{tname}}</span>
    <el-button type="info" style="float: right" size="small" @click="call" round>返回</el-button>
    <el-button type="primary" style="float: right;margin-right: 10px" size="small" @click="save" round>保存</el-button>
    <div style="margin:0px;padding:0px;position:absolute;width:20%;left: 43%;top: 48%;bottom: 0px;outline: none;">
        数据较大,正在渲染,请稍等。。。。。
    </div>
    <div id="luckysheet"
         style="margin:0px;padding:0px;position:absolute;width:100%;left: 0px;top: 50px;bottom: 0px;outline: none;"></div>
</div>

<script>
    var vue = new Vue({
        el: '#app',
        data: {
            options: {
                container: 'luckysheet',
                title: 'Luckysheet Demo',
                lang: 'zh', // 设定表格语言
                row: 36, //行数
                column: 18, //列数
                // 是否显示工具栏
                showtoolbar: false,
                // 是否显示顶部信息栏
                showinfobar: false,
                // 是否显示sheet页签
                showsheetbar: false,
                // 是否显示公式栏
                sheetFormulaBar: false,
                // 是否允许新增行
                enableAddRow: false,
                // 是否允许返回顶部
                enableAddBackTop: false,
                hook: {
                    // cellUpdated: "",
                    // cellUpdateBefore: ""
                },
                data: [{
                    // sheet名
                    name: "sheet1",
                    defaultColWidth: 150, //自定义列宽
                    index: "0",
                    config: {
                        // 单元格合并配置
                        "merge": {},
                        // 单元格边框配置
                        "borderInfo": [{
                            "rangeType": "range",
                            "borderType": "border-all",
                            "style": "1",
                            "color": "#000000",
                            "range": [{
                                "row": [7, 8],
                                "column": [2, 3]
                            }]
                        }],
                    },
                    // 单元格数据配置
                    celldata: [],
                    calcChain: []
                }],

            },
            //已修改行号
            row_number_list: new Set(),
            // id数据列表
            id_list: [],
            tid: 267,
            tname:"测试一表",
            token: {
                headers: {
                    'Authorization': "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOlsicmVzMSJdLCJ1c2VyX25hbWUiOiJmaW5lYm9hZG1pbiIsInNjb3BlIjpbImFsbCJdLCJleHAiOjE2MzYxNTI1NTUsImF1dGhvcml0aWVzIjpbIk9hZG1pbiIsIlItYWRtaW4iXSwianRpIjoiYmU1OTBiYzItZTQxNi00MDE0LWIwOTgtMGMwMzlhOTRjNWIxIiwiY2xpZW50X2lkIjoiYzEifQ.XkuVnFTQ33mD-vXxypcMc0XT3GflVowm9o8friK5c4A"
                }
            },
            backendUrl: "http://127.0.0.1:18082",
        },
        created() {
            this.backendUrl = window.backendUrl
            Request = this.GetRequest();
            this.token = {
               headers: {
                   'Authorization': Request.token
               }
            }
            this.tid = Request.tid;
            this.tname = Request.tname;
        },
        mounted: function () {
            // 渲染表数据
            this.findSourceBody();
        },
        methods: {

            GetRequest() {
                var url = location.search; //获取url中"?"符后的字串

                var theRequest = new Object();
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    strs = str.split("&");
                    for (var i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
                    }
                }
                return theRequest;
            },
            // 获取表内数据
            getAll() {
                var list = luckysheet.getluckysheetfile()[0].data
            },
            // 查询源数据
            findSourceBody() {
                axios.get(this.backendUrl + "/template/findShowByPid/" + this.tid, this.token).then((res) => {

                    let sourceList = []

                    res.data.data.forEach(element => {
                        console.log(JSON.parse(element.data))
                        sourceList.push(eval("(" + element.data + ")"))
                        this.id_list.push(element.id)
                    });

                    // 设置表格大小
                    this.options.column = sourceList[0].length;
                    this.options.row = sourceList.length;

                    // 设置边框范围
                    this.options.data[0].config["borderInfo"][0]["range"][0]["row"] = [0, sourceList.length - 1]
                    this.options.data[0].config["borderInfo"][0]["range"][0]["column"] = [0, sourceList[0].length - 1]

                    for (var i = 0; i < sourceList.length; i++) {
                        for (var j = 0; j < sourceList[i].length; j++) {
                            var item = {}
                            var gs = {}

                            if ((sourceList[i][j] + "").substring(0, 1) == "=") {

                                item = {
                                    "r": i,
                                    "c": j,
                                    "v": {

                                        "ct": {"fa": 'General', "t": 'g'},
                                        "f": sourceList[i][j].split("&")[0].replace(/\$/g, '"'),
                                        "ht": 1,
                                        "m": sourceList[i][j].split("&")[1],
                                        "v": sourceList[i][j].split("&")[1],
                                    },
                                }

                                gs = {
                                    "r": i,
                                    "c": j,
                                    "index": "0",
                                    "func": [
                                        true,
                                        sourceList[i][j].split("&")[1],
                                        sourceList[i][j].split("&")[0].replace(/\$/g, '"')
                                    ],
                                    "color": "w",
                                    "parent": null,
                                    "chidren": {},
                                    "times": 0
                                }
                                this.options.data[0].calcChain.push(gs)
                            } else {
                                item = {
                                    "r": i,
                                    "c": j,
                                    "v": {
                                        "ct": {
                                            "fa": "General",
                                            "t": "n"
                                        },
                                        "v": sourceList[i][j],
                                        "m": sourceList[i][j],
                                        "vt": 0,
                                        "ht": 1
                                    },
                                }
                            }

                            this.options.data[0].celldata.push(item)
                        }
                    }

                    luckysheet.create(this.options);

                }).catch((err) => {
                    console.log(err);
                });
            },

            //    保存变更后数据
            save() {
                //    获取模板数据
                data_list = luckysheet.getSheetData(0)

                for (const row_index in data_list) {
                    for (const col_index in data_list[row_index]) {
                        if (data_list[row_index][col_index] != null && data_list[row_index][col_index].hasOwnProperty('f')) {
                            data_list[row_index][col_index] = data_list[row_index][col_index].f + "&" + data_list[row_index][col_index].v

                            data_list[row_index][col_index] = data_list[row_index][col_index].replace(/"/g, '$');
                        } else if (data_list[row_index][col_index] != null && data_list[row_index][col_index].hasOwnProperty('v')) {
                            data_list[row_index][col_index] = data_list[row_index][col_index].v
                        } else {
                            data_list[row_index][col_index] = ""
                        }
                    }
                }

                // 组装更改对象
                for (const row_index in data_list) {
                    data_list[row_index] = {
                        "pid":this.tid,
                        "data":JSON.stringify(data_list[row_index]),
                        "rowId":row_index
                    };
                }

                axios.post(this.backendUrl + "/template/alterShowTemplate",data_list, this.token).then((res) => {

                    this.$message({
                        message: res.data.message,
                        type: res.data.flag ? "success" : "error"
                    });

                }).catch((err) => {
                    console.log(err);
                });
            },

            call() {
                window.open("call=binding.show_bind.show_table=back")
            }

        }
    })
</script>
</body>

</html>